<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水票订水</title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/public.css?v=20181211" />
    <link rel="stylesheet" href="css/member-ticket.css?v=20181211" />
    <script src='./js/jquery-3.2.1.min.js'></script>
    <script src="./js/mui.min.js"></script>
    <!--<script src="./js/mui.js"></script>-->
    <script src="./js/art-template.js"></script>
    <script src="./js/config.js?v=20181211"></script>
</head>
<body style="background: #f1f1f1;line-height: normal" >
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable" id="offCanvasWrapper">
    <!-- 菜单容器 -->
    <aside class="mui-off-canvas-right" style="box-shadow: 4px 5px 5px #f1f1f1;z-index: 2"> <!--background: #fff;-->
        <div class="mui-scroll-wrapper" style="overflow: auto">
            <div class="mui-scroll" style="padding: 0.5rem">
                <!--地址列表-->
                <div id="address_list_content">

                </div>
            </div>
        </div>
    </aside>
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap" style="" > <!--box-shadow: rgb(37, 189, 239) 0px 1px 16px;-->
        <div class="mui-content mui-scroll-wrapper change_bac">
            <div class="mui-scroll">
                <div class='has_address none change_bac show_noaddress' style="background: #fff;border: none">
                    <header class="mui-bar mui-bar-nav header_change_color">
                        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                        <h1 class="mui-title">一键订水</h1>
                    </header>
                    <div class="has_ticket none mui-content">
                        <!--轮播图-->
                        <form action="" name='myform' id='myform' class='mui-content' style="margin-top: 3rem">
                            <div class='mui-content' >

                                <img src="image/left.png" style="width: 1rem;height: 1rem;position: absolute;top: 8rem;left: 1rem;">
                                <div class="mui-slider" id="slider_img_content">
                                    <img src="image/right.png" style="width: 1rem;height: 1rem;position: absolute;top: 4rem;right: 1rem;">
                                </div>
                                <!--计算加减-->

                                <div class="mui-numbox" id="data-num" data-numbox-min='1' style="display: flex;display:-webkit-flex;background-color: #fff;">
                                    <!-- "-"按钮，点击可减小当前数值 -->
                                    <button id='min-button'  class=" mui-btn mui-numbox-btn-minus" type="button">-</button>
                                    <input id='mui-numbox-input' style="border-left: none!important;border-right: none!important;" class=" mui-numbox-input" type="number" value="1" />
                                    <!-- "+"按钮，点击可增大当前数值 -->
                                    <button id='max-button' class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                                </div>

                                <!--收货地址-->
                                <div style="display: flex;display: -webkit-flex">
                                    <div class='mui-action-menu add-address has_address' style="background: #fff;padding: 1rem 0;" id="address_content">

                                        <!--无地址时-->
                                    </div>
                                </div>




                                <!--备注-->
                                <div class="remark-input" style="margin: 0.7rem 0 1rem 0;">
                                    <input id='remark-input' type="text" class="mui-input-clear" placeholder="有特殊要求请在这里备注">
                                </div>
                                <!--确认订水-->
                                <div class='sure-submit' style="z-index: 999">
                                    <button  id='button' type="submit">确定订水</button>
                                </div>
                                <div class="bac_rgba none"></div>
                            </div>

                        </form>
                        <!--mui-content-->
                    </div>
                    <!--没有数据时 -- kong页面 -->
                    <div class="no_ticket no-content none" style="margin-top: 7rem;background: #f1f1f1">
                        <div class="mui-content" style="display: flex;display:-webkit-flex;align-items: center;
                        -webkit-align-items:center;justify-content: center;-webkit-justify-content:center;background: #f1f1f1">
                            <div style="width: 60%;height: 50%;background: #f1f1f1;display: flex;display:-webkit-flex;
                            align-items: center;-webkit-align-items:center;justify-content: center;
                            -webkit-justify-content:center;flex-direction: column;-webkit-flex-direction: column">
                                <img src="image/img.png" style="width: 100%;height: auto;border-radius: 100px">
                                <p style="margin-top: 2rem;font-size: 1rem;color: #8f8f94;">~~您还没有水票哟~~</p>
                            </div>
                        </div>
                    </div>

                    <!--各要传数据的隐藏域-->
                    <input type="hidden" id="tickt_id">

                    <!--轮播图-->
                    <script type="text/html" id="slider_img">

                        <div class="mui-slider-group">
                            <!--内容区容器-->
                            {{each waterbill_list bill}}
                            <div class="mui-slider-item">
                                <img class="slide-image" src="{{bill.goods_img}}" alt="" />
                                <p>{{bill.goods_name}}</p>
                                <p style="color:red;">余票 ：{{bill.rest_num}} 桶 </p>
                            </div>
                            {{/each}}
                        </div>
                    </script>

                    <!--收货地址-->
                    <script type="text/html" id="address">
                        {{each address_list address}}
                        {{if address.is_default == 1}}
                        <div class="show_zhezhao"  style="float: left;width: 85%">
                            <div style="display: flex;display:-webkit-flex;justify-content: space-between;-webkit-justify-content: space-between">
                                <p style="width: 90%">收货人：
                                    <span class='about-name-new'>{{address.name}}</span>
                                    <span class="about_mobile" style="margin-left: 0.5rem">{{address.mobile}}</span>
                                </p>
                            </div>
                            <p>收货地址：<span id="address_detail"></span></p>
                        </div>
                        <img class="show_zhezhao"  style="width: 1rem;height: 1rem;margin-top: 1.3rem;float: right" src="image/right.png">
                        {{/if}}
                        {{/each}}
                    </script>

                    <!--地址列表-->
                    <script type="text/html" id="address_list">
                        {{each address_list address}}
                        <div id="{{address.id}}" class='list_ocntent' style="border-bottom: 1px solid #f1f1f1;margin-bottom: 0.5rem;padding-bottom: 0.5rem;
													display: flex;align-items: center;justify-content: center; display: -webkit-flex;
                                                     -webkit-align-items: center;-webkit-justify-content: center">
                            <div style="width: 90%;position: relative" class="ad_list">
                                <p style="color: #fff"><span class=''>收货人：{{address.name}}</span> </p>
                                <p style="color: #fff"><span>电话：{{address.mobile}}</span></p>
                                <p style="color: #fff" class="" >收货地址：{{address.area_info}}{{address.position_address}} {{address.address}}</p>

                                <p class="choosed choosed{{address.id}}" style="position: absolute;top: -0.8rem;right:-1rem;width: 2rem;height: 2rem;background: #25bdef">
                                    <span style="color: #fff;font-size: 0.5rem;margin-left: 0.3rem">默认</span>
                                    <span class="sanjiao_down"></span>
                                </p>
                            </div>
                        </div>
                        {{/each}}
                    </script>
                </div>
            </div>
            <div class="mui-off-canvas-backdrop"></div>
        </div>
    </div>
</div>
<script src='js/commen.js?v=20181211'></script>
<script src="./js/share-ticket.js?v=20181211"></script>
</body>
</html>
